body {
  margin: 0;
}

.animation-module {
  transition: transform 0.5s cubic-bezier(0, 0, 0, 1);
}

/* 动画片段 */
.header {
  background: url("./img/header-bg@2x.png") top center no-repeat;
  background-size: cover;
  text-align: center;
  height: 300vh;
  overflow: hidden;
  width: 100%;
  position: relative;
}
.header-slices-block,
.header-slices-ball {
  position: absolute;
  left: 10vw;
  top: 50vh;
}
.header-slices-block > i,
.header-slices-ball > i {
  position: absolute;
  z-index: 1;
  background-position: 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

.slice-module-white,
.slice-module-blue,
.slice-module-black {
  width: 80vw;
  padding-top: 80vw;
  top: 0vh;
  background-size: contain;
}

.slice-module-white {
  background-image: url("./img/header-slice-white2@2x.png");
}

.slice-module-blue {
  background-image: url("./img/header-slice-blue2@2x.png");
}

.slice-module-black {
  background-image: url("./img/header-slice-black2@2x.png");
}

.slice-ball {
  width: 38.7vw;
  padding-top: 12.47vw;
  top: 18.5vh;
  right: -73vw;
  background-image: url("./img/header-slice-ball@2x.png");
  background-size: contain;
}

.slice-glod {
  width: 9.3vw;
  padding-top: 10.4vw;
  top: 0vh;
  right: -57vw;
  background-image: url("./img/header-slice-glod@2x.png");
}
